<template>
  <div class="_pageContent">
    <dataFilter
      :data="filterData"
      url="/user/list"
      @search="search"
      ref="dataFilterRef"
    ></dataFilter>

    <!-- 添加 -->
    <div class="_operation_add">
      <div style="color: #999;">
        <icon-list />
        列表
      </div>
      <div style="display: flex;flex-direction: row;gap: 10px;">
        <!-- <a-button type="primary">添加数据</a-button> -->
        <a-button type="primary" status="warning" @click="exportData">导出数据</a-button>
      </div>
    </div>

    <!-- 表格 -->
    <a-table :data="data">
      <template #columns>
        <a-table-column title="ID" data-index="userId" align="center"></a-table-column>
        <a-table-column title="用户头像" data-index="avatarUrl" align="center">
          <template #cell="{ record }">
            <a-avatar>
              <img :src="imgUrl + record.avatarUrl" alt="">
            </a-avatar>
          </template>
        </a-table-column>
        <a-table-column title="用户昵称" data-index="nickName" align="center"></a-table-column>
        <a-table-column title="手机号码" data-index="phone" align="center"></a-table-column>
        <a-table-column title="身份证" data-index="idCard" align="center"></a-table-column>
        <a-table-column title="工作单位" data-index="unit" align="center"></a-table-column>
        <a-table-column title="操作" data-index="operation" align="center">
          <template #cell="{ record }">
            <div class="_operation_wrapper">
              <span class="_operation_edit" @click="editRecord(record)">编辑</span>
            </div>
          </template>
        </a-table-column>
      </template>
    </a-table>
  </div>
<!-- 编辑  -->
<a-modal :visible="visible" title="编辑数据" @ok="handleOk" @cancel="visible = false">
  <a-form :model="form" ref="formRef" :rules="rules">
    <a-form-item label="用户头像" name="avatarUrl">
      <a-upload
        name="file"
        :action="url + '/file/upload'"
        :show-upload-list="false"
        accept="image/*"
        :show-file-list="false"
        @success="imgSuccess"
      >
        <template #upload-button>
          <img v-if="form.avatarUrl" style="height: 100px;" :src="imgUrl + form.avatarUrl" alt="">
          <div v-else style="color: #999;height: 100px;width: 100px;display: flex;align-items: center;justify-content: center;border: 1px dashed #999;">上传头像</div>
        </template>
      </a-upload>
    </a-form-item>
    <a-form-item label="用户昵称" name="nickName" field="nickName">
      <a-input v-model="form.nickName" />
    </a-form-item>
    <a-form-item label="手机号码" name="phone" field="phone">
      <a-input v-model="form.phone" />
    </a-form-item>
    <a-form-item label="身份证" name="idCard" field="idCard">
      <a-input v-model="form.idCard" />
    </a-form-item>
    <a-form-item label="工作单位" name="unit" field="unit">
      <a-input v-model="form.unit" />
    </a-form-item>
  </a-form>
</a-modal>
</template>
<script setup>
import { onMounted, ref } from "vue";
import dataFilter from "../../components/dataFilter.vue";
import { Message,Modal } from "@arco-design/web-vue";
import { postUserList,exportUser,postUpdateUser } from "../../../api/user";
// 组件 搜索
const filterData = ref([
  {
    label: "用户名",
    propName: "nickName",
    type: "input",
  },
  {
    label: "电话",
    propName: "phone",
    type: "input",
  },
  {
    label: "身份证",
    propName: "idCard",
    type: "input",
  },
  {
    label: "工作单位",
    propName: "unit",
    type: "input",
  }
]);



// 表单验证
const dataFilterRef = ref(null);
const formRef = ref(null);
const rules = {
  nickName: [{ required: true, message: '请输入用户昵称' }],
  phone: [{ required: true, message: '请输入手机号码' },{
    validator: (value, callback) => {
      if (value.length !== 11) {
        callback('手机号码必须为11位');
      } else {
        callback();
      }
    },
  }],
  idCard: [{ required: true, message: '请输入身份证' },{
    validator: (value, callback) => {
      if (value.length !== 18) {
        callback('身份证号码必须为18位');
      } else {
        callback();
      }
    },
  }],
  unit: [{ required: true, message: '请输入工作单位' }],
}

// 图片地址
const imgUrl = import.meta.env.VITE_APP_IMG_URL;
// 地址
const url = import.meta.env.VITE_APP_API_URL;
//tabel数据
const data = ref([]);
//编辑
const visible = ref(false);
const form = ref({});

//获取数据
function getList(){
  postUserList({}).then(res=>{
    data.value = res.data.sort((a,b) => b.userId - a.userId);
  })
}

//搜索
function search(res) {
  data.value = res.data
}
//编辑
function editRecord(record) {
  visible.value = true;
  form.value = JSON.parse(JSON.stringify(record));
}
//图片上传成功
function imgSuccess(res){
  const {response} = res;
  form.value.avatarUrl = response.data;
}
//确定
function handleOk(){
  if(form.value.avatarUrl == null){
    return Message.error('请上传用户头像');
  }
  formRef.value.validate().then(res=>{
    if(!res){
      postUpdateUser(form.value).then(res=>{
        if (res.code == 200){
          Message.success('修改成功');
          getList();
        }
      })
      visible.value = false;
    }
  })
}
// 导出
function exportData(){
  exportUser(dataFilterRef.value.filterParams)
}

onMounted(()=>{
  getList();
})
</script>
<style scoped>
._operation_wrapper {
  display: flex;
  justify-content: center;
  gap: 10px;
}
._operation_edit{
 color: #4588ff;   
 cursor: pointer;
}
._operation_delete{
    color: #ff6a36;
    cursor: pointer;
}
._operation_add{
  margin-bottom: 10px;

  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
</style>